<template>
	<div class="list-wrap">
		<ul class="tabNav">
			<li class="cur">拼团商品</li>
			<li>我的拼团</li>
		</ul>
		<div class="banner">
			<img src="" alt="">
		</div>
		<ul>
			<li class="itemBox">
				<div class="imgBox">
					<img src="" alt="">
				</div>
				<ul class="detailBox">
					<li class="s1">新人团神圣</li>
					<li class="l2">限未到店新客参团</li>
					<li class="l3"><span>2450</span>人已开团</li>

				</ul>
				<div class="listInfo">
					<div class="left">
						<h4 class="item_name">定制车享家定制雨刮终身免费刮</h4>
						<p class="item_info">
							<span class="s1">2人团</span>
							<span class="s2">￥<em>150</em></span>
							<span class="s3">单买价: <em>¥200</em></span>
						</p>
					</div>
					<div class="right">
						<a class="buyBtn" href="javascript:;">去开团</a>
					</div>
				</div>
			</li>
		</ul>
		<div class="banner">
			<img src="" alt="">
		</div>
	</div>
</template>

<script>
	import common from '../../../assets/js/common';
	import Vue from 'vue';
	import {Toast, MessageBox} from 'mint-ui';
	//import shareImg from "../../../static/image/shareimg.png";
	export default{
		data (){
			return {
			};
		},
		components: {},
		created (){
		},
		mounted (){
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	@import "../../../assets/css/reset.scss";
	@import "../../../assets/css/common.scss";
	html, body {
		height: 100%;
		background-color: #fff;
	}
	.list-wrap {
		.tabNav{
			display: flex;
			display: -webkit-box;//低版本安卓
			display: -webkit-flex; 
			li{
				-webkit-box-flex: 1;
				-webkit-flex: 1; 
				flex:1;
				height: 4rem;
				line-height: 4rem;
				text-align: center;
				font-size: 1.5rem;
				&.cur{
					color:#ff6600;
					position: relative;
					&:after{
						content:'';
						position: absolute;
						bottom:0;
						width: 6rem;
						height: 2px;
						left: 50%;
						margin-left:-3rem; ;
						background-color: #ff6600;
					}
				}
			}
		}
		.banner{
			height: 12rem;
			background-color: #ccc;
			margin-bottom: .8rem;
			img{
				width: 100%;
				height: auto;
			}
		}
		.itemBox{
			padding-bottom: .8rem;
			border-bottom:.9rem solid #F6F7F7;
			.imgBox{
				width: 37.5rem;
				height: 25rem;
				background-color: #ccc;
				margin-bottom: 1.7rem;
				img{
					width: 100%;
					height: auto;
				}
			}
			.detailBox{
				display: flex;
				display: -webkit-box;//低版本安卓
				display: -webkit-flex; 
				align-items:center;
				height: 1.8rem;
				padding: 0 1.5rem;
				margin-bottom: 1rem;
				.s1{
					width: auto;
					font-size:1.1rem;
					color:#ff6600;
					letter-spacing:0;
					text-align:justify;
					background:#ffefe5;
					border-radius:2px;
					height:1.8rem;
					padding:.2rem .4rem;
					margin-right: .8rem;
				}
				.l2{
					color:#ff6600;
					-webkit-box-flex: 1;
					-webkit-flex: 1; 
					flex:1;
					font-size: 1.1rem;
				}
				.l3{
					font-size: 1.3rem;
					color: #999;
					span{
						color:#ff6600;
					}
				}
			}
			.listInfo{
				overflow: hidden;
				padding: 0 1.5rem;
				.left{
					float: left;
					height: 4.4rem;
					.item_name{
						font-size: 1.7rem;
						line-height: 1.7rem;
						margin-bottom: .4rem;	
					}
					.item_info{
						.s1{
							font-size:1.3rem;
						}
						.s2{
							font-size: 1.1rem;
							em{
								font-size:1.9rem;
								margin-left: -.4rem;
							}
							
							color:#e62116;
						}
						.s3{
							font-size:1.1rem;
							color:#999;
							em{
								text-decoration:line-through;
							}
						}
					}
				}
				.right{
					float: right;
					display: flex;
					display: -webkit-box;//低版本安卓
					display: -webkit-flex; 
					align-items:center;
					height: 4.4rem;
					.buyBtn{
						background:#ff6600;
						border-radius:1.9rem;
						width:8rem;
						height:3rem;
						line-height: 3rem;
						text-align: center;
						color: #fff;
						font-size: 1.3rem;
					}
				}
			}
		}
	}
</style>
